<template>
	<view class="chatPage_box">
		<view class="MessageBox">
			<view>
				<scroll-view enable-flex="true" :scroll-top="scrollTop" :scroll-into-view="scrollDow" scroll-y="true" class="scroll-Y" scroll-with-animation="true" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
						
						<view v-if="messageMap.length > 0" v-for="(item,index) of messageMap" :key="index" :id="'i'+index" class="scroll-view-item">
							<view v-if="item.name != inputType.username" class="clientIm">
								<view class="face">
									<image :src="item.img"></image>
								</view>
								<view class="messageLin">
									<!-- <view class="CName">{{item.name}}</view> -->
									<text selectable="true" user-select="true" class="messageLinC">{{item.message}}</text>
								</view>
								<view class="f00t"></view>
							</view>
							<view v-else class="MyIm">
								<view class="f00t"></view>
								<view class="messageLin">
									<text selectable="true" user-select="true" class="messageLinM" >{{item.message}}</text>
								</view>
								<view class="face">
									<image :src="inputType.userImg"></image>
								</view>
							</view>
						</view>
						<view class="Placeholder"></view>
				</scroll-view>
			</view>
			<view class="textarea-comm">
				<inputCommon :inputType="inputType" @InputSendData="InputSendData"></inputCommon>
			</view>
			
		</view>
	</view>
</template>
<script>
	import inputCommon from "../inputSend/inputSend.vue"
	
	let platform = uni.getSystemInfoSync().platform
	
	export default {
		components: {
			inputCommon
		},
		data() {
			return {
				scrollTop: 0,
				scrollDow: '',
				old: {
					scrollTop: 0,
					scrollDow: '',
				},
				messageMap:[
				],
				inputType:{//发送者信息
				},
				connected: false,
				connecting: false,
				msg: false,
				roomId: ''
			}
		},
		methods: {
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e);
				this.old.scrollTop = e.detail.scrollTop
				
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon:"none",
					title:"纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			goDow: function(e){
				if(this.messageMap!== undefined  &&  this.messageMap!== null  &&  this.messageMap.length>0){
					this.scrollDow = this.old.scrollDow
					this.$nextTick(function() {
						this.scrollDow = 'i'+(this.messageMap.length-1)
					});
				}	
			},
			InputSendData(e){
				if(e[0] == undefined || e == null){
					return;
				}
				var userMessage = {
					"name":this.inputType.username,
					"message":e,
					"img":this.inputType.userImg
				}
				let user = JSON.stringify(userMessage)
				this.send(user)
				//this.messageMap.push(e);
				this.goDow();
				//console.log(e);
				e = null;
				
			},
			/**
			 * websocket--------------------
			 */
			connect(e) {
				if (typeof(WebSocket) === "undefined") {
					alert("您的浏览器不支持socket");
					return;
				}

				if (this.connected || this.connecting) {
					uni.showModal({
						content: '正在连接或者已经连接，请勿重复连接',
						showCancel: false
					})
					return false
				}
				this.connecting = true
				uni.showLoading({
					title: '连接中...'
				})
				uni.connectSocket({
					url: 'ws://'+getApp().globalData.ip+':8686/ws/'+e,
					data() {
						return {
							msg: this.inputType.username + '连接成功'
						}
					},
					// #ifdef MP
					header: {
						'content-type': 'application/json'
					},
					// #endif
					// #ifdef MP-WEIXIN
					method: 'GET',
					// #endif
					success(res) {
						// 这里是接口调用成功的回调，不是连接成功的回调，请注意
					},
					fail(err) {
						// 这里是接口调用失败的回调，不是连接失败的回调，请注意
					}
				})
				uni.onSocketOpen((res) => {
					this.connecting = false
					this.connected = true
					uni.hideLoading()
					uni.showToast({
						icon: 'none',
						title: '连接成功'
					})
					console.log('onOpen', res);
				})
				uni.onSocketError((err) => {
					this.connecting = false
					this.connected = false
					uni.hideLoading()
					uni.showModal({
						content: '连接失败，可能是websocket服务不可用，请稍后再试',
						showCancel: false
					})
					console.log('onError', err);
				})
				//接收消息
				uni.onSocketMessage((res) => {
					//转为JSON对象
					var messageInfo = JSON.parse(res.data)
					this.messageMap.push(messageInfo)
					console.log(messageInfo)
					
				})
				uni.onSocketClose((res) => {
					this.connected = false
					this.startRecive = false
					this.msg = false
				})
			},
			send(e) {
				console.log(e)
				uni.sendSocketMessage({
					data: e,
					
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			close() {
				uni.closeSocket()
			}
		},
		created() {
			uni.showLoading();
			let nums = 10;
			var times = setInterval(()=>{
				nums--;
				if(getApp().globalData.userAllInfo != null){
					let name = getApp().globalData.userAllInfo.userInfo.username;
					this.inputType = getApp().globalData.userAllInfo.userInfo;
					this.connect(name);
					clearInterval(times);
					uni.hideLoading();
				}else{
					if(nums<=0){
						nums = 10;
						uni.showModal({
							title: '错误',
							content: '无法连接网络，是否继续尝试连接网络？',
							success: function (res) {
								if (res.confirm) {
									nums = 10;
								} else if (res.cancel) {
									clearInterval(times);
									uni.hideLoading();
								}
							}
						});

					}
				}
			},3000)
		},
	}
</script>
<style>
	.chatPage_box{
		height: 85vh;
	}
	.textarea-comm{
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		align-items: center;
		
	}
	.f00t{
		min-width: 50px;
	}
	.MessageBox{
		background-color: #00a1f1;
		/* height: 800rpx; */
	}
	.scroll-Y {
		height: 75vh;
		min-width: 320px;
	}
	.face{
		background-color: green;
		margin: 0 10px;
		border-radius: 50%;
	}
	.face,.face > image{
		min-width: 30px;
		min-height: 30px;
		width: 30px;
		height: 30px;
	}
	.messageLinC{
		background-color: #bcbcbc;
	}
	.messageLinM{
		background-color: #00a1f1;
	}
	.messageLinC,.messageLinM{
		word-break:break-all;
		border-radius: 5px;
		padding: 7px 12px;
		color: #fff;
		cursor: default;
		
	}
	.MyIm,.clientIm{
		display: flex;
		display: -webkit-flex;
		margin-top: 20rpx;
	}
	.Placeholder{
		width: 20px;
		height: 20rpx;
	}
	.MyIm{
		justify-content: flex-end;
	}
	.clientIm{
		
	}
</style>